<template>
  <JVxeTable
    ref="tableRef"
    row-number
    keyboardEdit
    :maxHeight="tableHeight.noToolbar"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
    @valueChange="handleChange"
    v-bind="tableProps"
  />
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
  import { useTableSync } from '../../use/useTableSync';

  export default defineComponent({
    name: 'QueryTable',
    emits: ['query'],
    setup(_, { emit }) {
      const columns = ref([
        { title: '字段名称', key: 'dbFieldName', width: 130 },
        { title: '字段备注', key: 'dbFieldTxt', width: 130 },
        {
          title: '控件类型',
          key: 'queryShowType',
          width: 170,
          type: JVxeTypes.select,
          options: [
            { title: '文本框', value: 'text' },
            { title: '日期(yyyy-MM-dd)', value: 'date' },
            { title: '日期（yyyy-MM-dd HH:mm:ss）', value: 'datetime' },
            { title: '时间（HH:mm:ss）', value: 'time' },
            { title: '下拉框', value: 'list' },
            { title: '下拉多选框', value: 'list_multi' },
            { title: '下拉搜索框', value: 'sel_search' },
            { title: '分类字典树', value: 'cat_tree' },
            { title: 'Popup弹框', value: 'popup' },
            { title: '部门选择', value: 'sel_depart' },
            { title: '用户选择', value: 'sel_user' },
            { title: '省市区组件', value: 'pca' },
            { title: '自定义树控件', value: 'sel_tree' },
          ],
          defaultValue: 'text',
          placeholder: '请选择${title}',
        },
        {
          title: '字典Table',
          key: 'queryDictTable',
          width: 130,
          type: JVxeTypes.textarea,
          defaultValue: '',
        },
        {
          title: '字典Code',
          key: 'queryDictField',
          width: 130,
          type: JVxeTypes.input,
          defaultValue: '',
        },
        {
          title: '字典Text',
          key: 'queryDictText',
          width: 130,
          type: JVxeTypes.input,
          defaultValue: '',
        },
        {
          title: '默认值',
          key: 'queryDefVal',
          width: 130,
          type: JVxeTypes.input,
          defaultValue: '',
        },
        {
          title: '是否启用',
          key: 'queryConfigFlag',
          minWidth: 80,
          type: JVxeTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: false,
        },
      ]);
      const setup = useTableSync(columns);
      function handleChange({ row, column, value }) {
        if (column.key === 'queryConfigFlag') {
          if (value === '1') {
            emit('query', row.id);
          }
        }
      }
      return Object.assign({}, setup, { columns, handleChange });
    },
  });
</script>
